<template>
  <Table ref="selection" :columns="columns" :data="data" class="table">
    <template #content="{ row }">
      <Switch :model-value="row.isEnable == 1 ? true : false" />
    </template>
    <template #con="{ row }">
      <div class="con">{{ row.content }}</div>
    </template>
    <template #action="{ row, index }">
      <Icon
        type="ios-create"
        color="#2d8cf0"
        size="24"
        style="margin-right: 5px"
        @click="edit(row.id)"
      />
      <Icon type="ios-trash" color="#2d8cf0" size="24" @click="remove(row.id)" />
    </template>
  </Table>
</template>

<script setup>
const props = defineProps({
  columns: {
    type: Array,
    default: () => [],
  },
  data: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["edit", "remove"]);
const edit = (index) => {
  emit("edit", index);
};
// 删除按钮
const remove = (index) => {
  emit("remove", index);
};
</script>

<style scoped>
.table {
  margin: 20px 0;
  .con{
    /* 单行省略号 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
}
</style>
